﻿<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993] for details.
// All other rights reserved.
-->

<UserControl x:Class="System.Windows.Controls.Samples.AccordionShowcase"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
    xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"
    xmlns:layoutToolkitPrimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Layout.Toolkit"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
     >
    <StackPanel Background="White">

        <ContentControl Content="Accordion restyled (based on ajax toolkit style)" Style="{StaticResource Header}" />
        <layoutToolkit:Accordion>
            <layoutToolkit:Accordion.Resources>
                <!-- ajax toolkit styled AccordionItemHeader-->
                <ControlTemplate TargetType="layoutToolkitPrimitives:AccordionButton" x:Key="AjaxHeader">
                    <Grid Background="Transparent">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <!-- ExpansionStates -->
                            <vsm:VisualStateGroup x:Name="ExpansionStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Collapsed">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="background" 
                      Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5078B3"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- CheckStates -->
                            <vsm:VisualStateGroup x:Name="CheckStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Checked" >
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unchecked"/>
                            </vsm:VisualStateGroup>
                            <!-- CommonStates -->
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" From="MouseOver" To="Normal"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="MouseOverBackground" 
                      Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
                                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF2E4D7B"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- FocusStates -->
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

                        <Border x:Name="MouseOverBackground"
              Background="#FF2E4D7B"
              BorderBrush="{TemplateBinding BorderBrush}" 
              BorderThickness="{TemplateBinding BorderThickness}" >
                            <Border x:Name="background" Background="Transparent">
                                <Grid Background="Transparent"
                      Margin="{TemplateBinding Padding}">
                                    <ContentControl x:Name="header"
                    Grid.Column="1" Grid.Row="0"
                    Content="{TemplateBinding Content}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Foreground="{TemplateBinding Foreground}"
                    FontFamily="{TemplateBinding FontFamily}"
                    FontSize="{TemplateBinding FontSize}"
                    FontStretch="{TemplateBinding FontStretch}"
                    FontStyle="{TemplateBinding FontStyle}"
                    FontWeight="{TemplateBinding FontWeight}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    </ContentControl>
                                </Grid>
                            </Border>
                        </Border>
                        <Rectangle x:Name="FocusVisualElement"
              IsHitTestVisible="false" 
              Stroke="Green" 
              StrokeDashArray="1 2" 
              StrokeThickness="1" 
              Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
                <!-- ajax toolkit styled AccordionItem-->
                <ControlTemplate TargetType="layoutToolkit:AccordionItem" x:Key="ajaxTemplate">
                    <Grid Background="Transparent">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <!-- CommonState -->
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- FocusStates -->
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <!-- Unfocused -->
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                            <!-- ExpansionStates -->
                            <vsm:VisualStateGroup x:Name="ExpansionStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Collapsed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                          BeginTime="00:00:00"
                          Storyboard.TargetName="ExpandSite"
                          Storyboard.TargetProperty="(layoutToolkitPrimitives:ExpandableContentControl.Percentage)">
                                            <SplineDoubleKeyFrame
                            KeyTime="00:00:00.3"
                              KeySpline="0.2,0,0,1"
                              Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                            BeginTime="00:00:00"
                            Storyboard.TargetName="ExpandSite"
                            Storyboard.TargetProperty="(layoutToolkitPrimitives:ExpandableContentControl.Percentage)">
                                            <SplineDoubleKeyFrame
                              KeyTime="00:00:00.3"
                              KeySpline="0.2,0,0,1"
                              Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- ExpansionStates -->
                            <vsm:VisualStateGroup x:Name="LockedStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Locked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>False</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unlocked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background" 
              Padding="{TemplateBinding Padding}"
              Background="{TemplateBinding Background}" 
              BorderBrush="{TemplateBinding BorderBrush}" 
              BorderThickness="{TemplateBinding BorderThickness}" 
              CornerRadius="4">
                            <Grid>
                                <Grid.RowDefinitions >
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <layoutToolkitPrimitives:AccordionButton
                  Template="{StaticResource AjaxHeader}"
                  x:Name="ExpanderButton"
                  Content="{TemplateBinding Header}"
                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                  IsChecked="{TemplateBinding IsSelected}"
                  Grid.Column="0"
                  Grid.ColumnSpan="2"
                  Grid.Row="0"
                  Padding="4"
                  Margin="0"
                  FontFamily="{TemplateBinding FontFamily}"
                  FontSize="14"
                  FontStretch="{TemplateBinding FontStretch}"
                  FontStyle="{TemplateBinding FontStyle}"
                  FontWeight="Bold"
                  Foreground="#FFFFFFFF"
                  HorizontalContentAlignment="Left"
                  VerticalContentAlignment="Center" />

                                <layoutToolkitPrimitives:ExpandableContentControl
                  x:Name="ExpandSite"
                  Grid.Column="0"
                  Grid.ColumnSpan="2"
                  Grid.Row="1"
                  Percentage="0"
                  Background="#FFD3DEEF"
                  RevealMode="{TemplateBinding ExpandDirection}"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Padding="2"
                  Margin="1"
                  FontFamily="{TemplateBinding FontFamily}"
                  FontSize="12"
                  FontStretch="{TemplateBinding FontStretch}"
                  FontStyle="{TemplateBinding FontStyle}"
                  FontWeight="{TemplateBinding FontWeight}"
                  Foreground="DarkGray"
                  HorizontalAlignment="Stretch"
                  HorizontalContentAlignment="Left"
                  VerticalAlignment="Stretch"
                  VerticalContentAlignment="Top" />

                            </Grid>
                        </Border>
                        <Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/>
                        <Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderThickness="1" CornerRadius="3">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFA3AEB9"/>
                                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                    <GradientStop Color="#FF718597" Offset="0.375"/>
                                    <GradientStop Color="#FF617584" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </layoutToolkit:Accordion.Resources>

            <layoutToolkit:AccordionItem Header="1. Accordion" Template="{StaticResource ajaxTemplate}">
                <layoutToolkit:AccordionItem.Content>
                    <TextBlock>
            The Accordion is a control that allows you to provide multiple panes and display them.<LineBreak/>
            There are several selection modes, so you can decide if only one pane can be open, <LineBreak/>
            or multiple.<LineBreak/>
            It is also possible to adjust the order in which the panes open and close:<LineBreak/>
            Simultaneous or close first. <LineBreak/>
            <LineBreak/>
            The Accordion is implemented as an itemscontrol that contains AccordionItem controls. <LineBreak/>
            Each AccordionItem control has a template for its Header and its Content. <LineBreak/>
                    </TextBlock>
                </layoutToolkit:AccordionItem.Content>
            </layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="2. AutoSize" Template="{StaticResource ajaxTemplate}">
                <TextBlock>
          It also supports filling to a specific height or width. <LineBreak/>
          To do so, either set a Height (or Width) or use a VerticalAlignment <LineBreak/>
          (or HorizontalAlignment) of 'Stretch'. <LineBreak/>
          The Accordion will now always fill to that space. If more than one pane <LineBreak/>
          may be opened, space is divided equally among them.
          <LineBreak/>
          Whether you fill to height or width is determined by the ExpandDirection property.<LineBreak/>
          An accordion will is able to expand to Down, Up, Left and Right directions.
                </TextBlock>
            </layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="3. Template parts" Template="{StaticResource ajaxTemplate}">
                <TextBlock>
          The accordion uses AccordionItems that can be fully templated.<LineBreak/>
          In order to 'reveal' contents slowly, an ExpandableContentControl is used. <LineBreak/>
          That control has a percentage property that can be animated. A value of 1 <LineBreak/>
          means that the content is completely shown.<LineBreak/>
          <LineBreak/>
          AccordionItem animates this property using a keyspline to get a nice <LineBreak/>
          easing-in effect. You can retemplate AccordionItem and create your own <LineBreak/>
          transitions!<LineBreak/>
                </TextBlock>
            </layoutToolkit:AccordionItem>
        </layoutToolkit:Accordion>

        <ContentControl Content="Accordion restyled horizontally" Style="{StaticResource Header}" />
        <layoutToolkit:Accordion ExpandDirection="Left" Background="#FFE7E7E7" >
            <layoutToolkit:Accordion.Resources>
                <!-- horizontal header -->
                <ControlTemplate TargetType="layoutToolkitPrimitives:AccordionButton" x:Key="HorizontalHeader">
                    <Grid Background="Transparent">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <!-- ExpandDirectionStates -->
                            <vsm:VisualStateGroup x:Name="ExpandDirectionStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="ExpandDown">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="ExpandUp">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="ExpandLeft">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="ExpandRight">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- ExpansionStates -->
                            <vsm:VisualStateGroup x:Name="ExpansionStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Collapsed">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Expanded">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- CheckStates -->
                            <vsm:VisualStateGroup x:Name="CheckStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Checked" />
                                <vsm:VisualState x:Name="Unchecked"/>
                            </vsm:VisualStateGroup>
                            <!-- CommonStates -->
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" From="MouseOver" To="Normal"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- FocusStates -->
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

                        <Border x:Name="MouseOverBackground"
              Background="Transparent"
               >
                            <Border x:Name="background" Background="Transparent">
                                <Grid Width="20" Height="200"
                      Margin="{TemplateBinding Padding}">

                                    <Path Width="60"
                    Data="M7.2912064,0.5 C35.733871,0.5 58.791206,44.375938 58.791206,98.5 C58.791206,152.62386 35.734119,196.5 7.2912064,196.5 C5.5135384,196.5 3.7569084,196.32861 2.025631,195.99403 L0.5,195.55096 L3.2518349,194.50899 C13.537304,189.28716 22.366497,174.14719 28.045227,153.29272 C30.884619,142.86546 32.936363,131.00955 33.988701,118.25042 C35.041069,105.49129 35.041069,91.508682 33.988701,78.74958 C31.884027,53.231354 25.781698,31.325907 17.37603,17.23686 C13.173197,10.192317 8.3945103,5.1018929 3.2518349,2.4910123 L0.5,1.4490361 L2.025631,1.0059637 C3.7569084,0.67139101 5.5135384,0.5 7.2912064,0.5 z" 
                    Stretch="Fill" Stroke="Black" StrokeThickness="2" Height="197" Margin="-40,0,0,0">
                                        <Path.Fill>
                                            <LinearGradientBrush EndPoint="-0.162,1.001" StartPoint="2.078,0.261">
                                                <GradientStop Color="#FFC4C4C4"/>
                                                <GradientStop Color="#FFF2F2F2" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>

                                    <ContentPresenter x:Name="header"
                    Margin="0,0,5,0"
                    RenderTransformOrigin="0.5,0.5"
                    Content="{TemplateBinding Content}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center">
                                        <ContentPresenter.LayoutTransform>
                                            <RotateTransform Angle="90" />
                                        </ContentPresenter.LayoutTransform>
                                    </ContentPresenter>
                                </Grid>

                            </Border>
                        </Border>
                        <Rectangle x:Name="FocusVisualElement"
              IsHitTestVisible="false" 
              Stroke="Green" 
              StrokeDashArray="1 2" 
              StrokeThickness="1" 
              Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>


                <!-- horizontal template-->
                <ControlTemplate TargetType="layoutToolkit:AccordionItem" x:Key="HorizontalTemplate">
                    <Grid Background="Transparent"
            HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
            VerticalAlignment="{TemplateBinding VerticalAlignment}">

                        <vsm:VisualStateManager.VisualStateGroups>
                            <!-- CommonState -->
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- FocusStates -->
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <!-- Unfocused -->
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                            <!-- ExpansionStates -->
                            <vsm:VisualStateGroup x:Name="ExpansionStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Collapsed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                          BeginTime="00:00:00"
                          Storyboard.TargetName="ExpandSite"
                          Storyboard.TargetProperty="(layoutToolkitPrimitives:ExpandableContentControl.Percentage)">
                                            <SplineDoubleKeyFrame
                            KeyTime="00:00:00.3"
                              KeySpline="0.2,0,0,1"
                              Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                            BeginTime="00:00:00"
                            Storyboard.TargetName="ExpandSite"
                            Storyboard.TargetProperty="(layoutToolkitPrimitives:ExpandableContentControl.Percentage)">
                                            <SplineDoubleKeyFrame
                              KeyTime="00:00:00.3"
                              KeySpline="0.2,0,0,1"
                              Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- ExpansionStates -->
                            <vsm:VisualStateGroup x:Name="LockedStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Locked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>False</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unlocked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <!-- ExpandDirectionStates-->
                            <vsm:VisualStateGroup x:Name="ExpandDirectionStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="ExpandDown">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd1" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="ExpandUp">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>0</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="ExpandLeft">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.RowSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>2</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.RowSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>2</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Column)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>0</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="ExpandRight">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.RowSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>2</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.RowSpan)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>2</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>0</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Column)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd1" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background" 
              Background="{TemplateBinding Background}" 
              >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" x:Name="rd0"/>
                                    <RowDefinition Height="Auto" x:Name="rd1"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" x:Name="cd0"/>
                                    <ColumnDefinition Width="Auto" x:Name="cd1"/>
                                </Grid.ColumnDefinitions>

                                <layoutToolkitPrimitives:AccordionButton
                  x:Name="ExpanderButton"
                  Template="{StaticResource HorizontalHeader}"
                  Content="{TemplateBinding Header}"
                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                  IsChecked="{TemplateBinding IsSelected}"
                  Grid.Column="0"
                  Grid.ColumnSpan="2"
                  Grid.Row="0"
                  Padding="2"
                  Margin="1"
                  FontFamily="{TemplateBinding FontFamily}"
                  FontSize="{TemplateBinding FontSize}"
                  FontStretch="{TemplateBinding FontStretch}"
                  FontStyle="{TemplateBinding FontStyle}"
                  FontWeight="{TemplateBinding FontWeight}"
                  Foreground="{TemplateBinding Foreground}"
                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch" />

                                <layoutToolkitPrimitives:ExpandableContentControl
                  x:Name="ExpandSite"
                  Grid.Column="0"
                  Grid.ColumnSpan="2"
                  Grid.Row="1"
                  Percentage="0"
                  RevealMode="{TemplateBinding ExpandDirection}"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Padding="2"
                  Margin="1"
                  FontFamily="{TemplateBinding FontFamily}"
                  FontSize="{TemplateBinding FontSize}"
                  FontStretch="{TemplateBinding FontStretch}"
                  FontStyle="{TemplateBinding FontStyle}"
                  FontWeight="{TemplateBinding FontWeight}"
                  Foreground="{TemplateBinding Foreground}"
                  HorizontalContentAlignment="Left"
                  VerticalContentAlignment="Top" 
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch" />

                            </Grid>
                        </Border>
                        <Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/>
                        <Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderThickness="1" CornerRadius="3">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFA3AEB9"/>
                                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                    <GradientStop Color="#FF718597" Offset="0.375"/>
                                    <GradientStop Color="#FF617584" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </layoutToolkit:Accordion.Resources>

            <layoutToolkit:AccordionItem Margin="35,0,0,0" Header="1. Accordion" Template="{StaticResource HorizontalTemplate}">
                <layoutToolkit:AccordionItem.Content>
                    <TextBlock Margin="0,0,30,0">
            The Accordion is a control that allows you to provide multiple panes and display them.<LineBreak/>
            There are several selection modes, so you can decide if only one pane can be open, <LineBreak/>
            or multiple.<LineBreak/>
            It is also possible to adjust the order in which the panes open and close:<LineBreak/>
            Simultaneous or close first. <LineBreak/>
            <LineBreak/>
            The Accordion is implemented as an itemscontrol that contains AccordionItem controls. <LineBreak/>
            Each AccordionItem control has a template for its Header and its Content. <LineBreak/>
                    </TextBlock>
                </layoutToolkit:AccordionItem.Content>
            </layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="2. AutoSize" Template="{StaticResource HorizontalTemplate}">
                <TextBlock Margin="0,0,30,0">
          It also supports filling to a specific height or width. <LineBreak/>
          To do so, either set a Height (or Width) or use a VerticalAlignment <LineBreak/>
          (or HorizontalAlignment) of 'Stretch'. <LineBreak/>
          The Accordion will now always fill to that space. If more than one pane <LineBreak/>
          may be opened, space is divided equally among them.
          <LineBreak/>
          Whether you fill to height or width is determined by the ExpandDirection property.<LineBreak/>
          An accordion will is able to expand to Down, Up, Left and Right directions.
                </TextBlock>
            </layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="3. Template parts" Template="{StaticResource HorizontalTemplate}">
                <TextBlock Margin="0,0,30,0">
          The accordion uses AccordionItems that can be fully templated.<LineBreak/>
          In order to 'reveal' contents slowly, an ExpandableContentControl is used. <LineBreak/>
          That control has a percentage property that can be animated. A value of 1 <LineBreak/>
          means that the content is completely shown.<LineBreak/>
          <LineBreak/>
          AccordionItem animates this property using a keyspline to get a nice <LineBreak/>
          easing-in effect. You can retemplate AccordionItem and create your own <LineBreak/>
          transitions!<LineBreak/>
                </TextBlock>
            </layoutToolkit:AccordionItem>
        </layoutToolkit:Accordion>
    </StackPanel>
</UserControl>
